<template>
  <div>
    <el-form v-show="value.queryShow" ref="queryForm" :model="value.queryParams" :inline="true" size="small" label-width="68px">
      <el-row :gutter="10">
        <slot />
        <slot name="btn">
          <el-col :span="4">
            <el-form-item label-width="0">
              <slot name="btn-search">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">
                  搜索
                </el-button>
              </slot>
              <slot name="btn-reset">
                <el-button icon="el-icon-refresh" @click="$emit('resetQuery')">
                  重置
                </el-button>
              </slot>
            </el-form-item>
          </el-col>
        </slot>
      </el-row>
    </el-form>
    <el-row :gutter="10">
      <el-col :span="1.5">
        <slot name="btn-add">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="$emit('handleAdd')">
            新增
          </el-button>
        </slot>
      </el-col>
      <el-col :span="1.5">
        <slot name="btn-delete">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="value.multiple" @click="$emit('handleDelete')">
            批量删除
          </el-button>
        </slot>
      </el-col>
      <el-col :span="1.5">
        <slot name="btn-import">
          <el-button type="primary" plain icon="el-icon-s-promotion" size="mini" @click="$emit('handleImport')">
            导入
          </el-button>
        </slot>
      </el-col>
      <el-col :span="1.5">
        <slot name="btn-export">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="$emit('handleExport')">
            导出
          </el-button>
        </slot>
      </el-col>
      <el-col :span="2">
        <RightToolbar :show-search.sync="value.queryShow" @queryTable="$emit('getList')" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import RightToolbar from './components/RightToolbar'
export default {
  components: { RightToolbar },
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['getList', 'handleExport', 'handleImport', 'handleDelete', 'handleAdd', 'resetQuery', 'input'],
  methods: {
    /** 搜索按钮操作 */
    handleQuery () {
      this.$emit('input', {
        ...this.value,
        queryParams: {
          ...this.value.queryParams,
          pageNum: 1
        }
      })
      this.$emit('getList')
    }
  }
}
</script>
